<template>
    <div class="msg-detail">
        <van-nav-bar fixed :z-index="100" title="消息" left-arrow @click-left="onClickLeft" />
        <div class="content">
            {{this.$route.params.content}}
        </div>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    import {
        Icon,
        Cell,
        Toast,
        Card,
        Button,
        NavBar
    } from 'vant'
    import Arrow from '@/components/vue-scroller/components/Arrow.vue'
    import storeNavBar from '@/components/store-nav-bar'
    import { isIOS } from 'mobile-device-detect'

    export default {
        components: {
            [NavBar.name]: NavBar,
            Toast,
            Arrow,
            storeNavBar,
        },
        computed: {
            // ...mapState({
            //   content: state => state.home.content
            // })
            ...mapState({
                isLogin: state => state.user.isLogin,
            }),
        },

        data() {
            return {
               
            }
        },
        created() {
            // this.$http.post("order/orderDetail", { orderId: 540 }).then(data => {
            //     this.msgDetail = data.info;
            //     localStorage.setItem("cache_home", JSON.stringify(data.info))
            // }).catch(error => {
            // })
            // console.log(this.$route.params.id)
            // this.$store.dispatch('home/content')
        },
        methods: {
            onClickLeft() {
                this.$router.push('/msg')
            }
        }
    }
</script>

<style lang="scss" scoped>
    .msg-detail {
        position: relative;
        overflow: auto;
        min-height: 100vh;

        .content {
            margin-top: 75px;
            padding: 0 15px;

            .sub-msg-card-box {
                padding: 8px 0;
                background: #fff;
                border-radius: 6px;

                .sub-msg-card {
                    /* background: #fff; */
                    display: flex;
                    padding: 8px 16px;
                    border-radius: 6px;

                    .pic-box {
                        width: 96px;
                        height: 96px;
                        margin-right: 12px;
                        background: red;
                        border-radius: 4px;
                    }

                    .sub-msg-content-box {
                        width: 219px;

                        .goods-name {
                            font-size: $font-size-normal;
                            color: $title-clr;
                            line-height: 16px;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                        }

                        .sku-info {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            margin-top: 12px;

                            .sku-detail {
                                font-size: $font-size-small;
                                color: $text-clr;
                            }

                            .count {
                                font-size: $font-size-normal;
                                color: $gray-deep;
                            }
                        }

                        .price {
                            font-size: $font-size-normal;
                            color: $primary-clr;
                            margin-top: 12px;
                        }
                    }
                }
            }

            .sub-logistics-info {
                background: #fff;
                margin-top: 10px;
                padding: 0 16px;
                border-radius: 6px;

                .logistics-box {
                    display: flex;
                    align-items: center;
                    height: 46px;
                    border-bottom: solid thin #F8F8F8;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    .logistics-title {
                        font-size: $font-size-normal;
                        color: $primary-clr;
                        margin-right: 12px;
                        flex-shrink: 0;
                    }

                    .logistics-content {
                        font-size: $font-size-small;
                        color: $text-clr;
                        word-break: break-all;
                        word-wrap: break-word;
                    }
                }

                /* div{
              word-break:break-all;word-wrap:break-word;
            } */
            }
        }

        .msg-detail-bootom-bar {
            position: absolute;
            bottom: 0;
            background: #fff;
            height: 49px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            width: 100%;
            padding: 0 15px;

            .service-btn {
                border: 1px solid #FE472D;
                border-radius: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 12px;
                color: #FE472D;
                width: 90px;
                height: 30px;
            }

            .sub-btn {
                border: 1px solid #FE472D;
                border-radius: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 12px;
                background: #FE472D;
                width: 90px;
                height: 30px;
                color: #fff;
                margin-left: 12px;
            }
        }
    }
</style>